<template>
	<view class="bg-gray1" style="min-height: 100vh;">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">提现</block>
		</cu-custom>
		<view class="d_content">
			<view class="d_info">
				<view class="flex align-center">
					<image src="../../../static/image/dBefor.png" style="width: 40rpx;height:40rpx"
						class="margin-right"></image>
					<image src="../../../static/image/wx_pic.png" style="width: 80rpx;height:80rpx"></image>
				</view>
				<view class="text-right">
					<view class="text-black text-bold" v-if="userInfo.nickName">{{userInfo.nickName}}</view>
					<view class="text-gray3 margin-top-xs">{{userInfo.phone}}</view>
				</view>
			</view>
			<view class="m_info">
				<view class="text-bold">提现金额</view>
				<view class="m_input">
					<view class="text-bold font-58">￥</view>
					<input v-model="amount" type="digit" placeholder="请输入提现金额（1~200元）" placeholder-class="input-text"
						class="mInput" name="input" @input="oninput"></input>
				</view>
				<view class="flex text-bold" style="padding: 20rpx 0 10rpx;">
					<view class="text-gray3">可提现金额{{canApply? canApply.toFixed(2):'0.00'}}元，</view>
					<view style="color: #FF3F6D" @click="allCommit()">全部提现</view>
				</view>
			</view>
		</view>
		<button class="d_btn" @click="submit">立即提现</button>
		<text-bar title="提现记录" pageUrl="/pages/distribution/distribution-withdraw-list/index"></text-bar>
	</view>
</template>

<script>
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'
	import textBar from '@/components/text-bar/text-bar.vue'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				canApply: 0,
				amount: undefined,
				userInfo: {}
			}
		},
		components: {
			textBar
		},
		onShow() {
			app.initPage().then(res => {
				this.userInfo = uni.getStorageSync('user_info')
				this.getCommission()
			})
		},
		methods: {
			// 可提现佣金查询
			getCommission() {
				api.getCommissionById(this.userInfo.id).then(res => {
					const unFreeze = res.data && res.data.unFreeze ? res.data.unFreeze : 0
					const applyComplete = res.data && res.data.applyComplete ? res.data.applyComplete : 0
					const applying = res.data && res.data.commissionRecord && res.data.commissionRecord[0] ? res.data.commissionRecord[0] : 0
					
					this.canApply = unFreeze - applyComplete - applying
				})
			},
			// 申请提现
			submit() {
				if (this.userInfo.enable == '2') {
					uni.showToast({
						title: '用户状态异常，无法提现',
						icon: 'none',
						duration: 3000
					})
					return;
				}
				if (this.amount < 1 || !this.amount) {
					uni.showToast({
						title: '申请金额不低于1元',
						icon: 'none',
						duration: 3000
					})
					return;
				}
				if (this.amount > 200) {
					uni.showToast({
						title: '单笔提现不能超过200',
						icon: 'none',
						duration: 3000
					})
					return;
				}
				if (parseFloat(this.amount) > parseFloat(this.canApply)) {
					uni.showToast({
						title: '申请金额不能超过可提现金额',
						icon: 'none',
						duration: 3000
					})
					return;
				}
				// 申请提现				
				api.userwithdrawRecordSave({
					userId: this.userInfo.id,
					amount: this.amount,
					memo: ''
				}).then(res => {
					uni.showToast({
						title: '申请成功',
						icon: 'success',
						duration: 1000,
						success: (res) => {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/distribution/distribution-withdraw-list/index'
								});
							}, 1000)
						}
					});
				});
			},
			// 全部提现
			allCommit() {
				this.amount = this.canApply || 0
			},
			// input输入框金额限制
			oninput(e) {
				this.$nextTick(() => {
					let val = e.target.value.toString();
					val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
					val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
					val = val.replace(/^0+\./g, '0.');
					val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
					val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''

					this.amount = val;
				});
			}

		}
	}
</script>

<style scoped>
	.d_content {
		background-image: linear-gradient(#FD8CA8, #F6F7F9);
		padding: 30rpx 20rpx 0;
	}

	.d_content .d_info {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 15rpx;
		padding: 20rpx 20rpx;
	}

	.d_content .m_info {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx 20rpx;
		margin-top: 30rpx;
	}

	.d_content .m_info .m_input {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #E5E6EB;
	}


	.d_content .m_info .m_input .mInput {
		width: 0;
		flex: 1;
		font-size: 42rpx;
		margin-left: 15rpx;
	}

	.d_btn {
		background-image: linear-gradient(90deg, #FF7A2F, #FF001F);
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		margin: 30rpx 50rpx;
	}
</style>
<style>
	.d_content .m_info .m_input .input-text {
		color: #86909C;
		font-size: 34rpx;
	}
</style>